<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CPI大数据图形报表</title>
<link rel="stylesheet" type="text/css"
	href="css/style.css">
<script
	src="My97DatePicker/WdatePicker.js"
	type="text/javascript"></script>
<script type="text/javascript"
	src="js/jquery-1.9.1.min.js"></script>
	
	<!-- 引进eharts -->
	<script type="text/javascript" src="js/eharts-min-js.js"></script>
<script type="text/javascript">
	function check() {
		var value  = $('input[name="plotType"]:checked').val(); 
		if (value=="pie") {
			if ($.trim($("#areaid").val()) == "") {
				alert("请选择数据来源区域，此值不能为空。");
				$("#areaid").focus();
				return false;
			}
		}
		if ($.trim($("#cpidate").val()) == "") {
			alert("时间不能为空，请输入数据来源时间！");
			$("#cpidate").focus();
			return false;
		}
	}
</script>
</head>
<body>

	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td width="153" height="48"><img
				src="images/cpireport.gif"
				width="153" height="48"></td>
			<td
				background="images/maintitle-bg.gif">&nbsp;</td>
			<td width="80"><img
				src="images/maintitle-right.gif"
				width="80" height="48"></td>
		</tr>
	</table>
		<table width="100%" border="0" cellpadding="0" cellspacing="5"
			class="pagenav">
			<tr>
				<td align="left" nowrap><strong>搜索条件：</strong></td>
				<td align="right" nowrap>CPI数据父类：</td>
				<td><select id="datatypeid" name="dataType"
					class="input-text-sytle98">
						
							<option value="水果类"
								>水果类</option>
						
							<option value="蔬菜类"
								>蔬菜类</option>
						
							<option value="粮食类"
								>粮食类</option>
						
							<option value="药品类"
								>药品类</option>
								
							<option value="军工类"
									>军工类</option>
									
							<option value="文娱类"
									>文娱类</option>
						
				</select></td>
				<td align="right">数据来源区域：</td>
				<td><select id="areaid" name="area"
					class="input-text-sytle98">
						<option value="">请选择</option>
						
							<option value="甘肃省"
								selected>甘肃省</option>
						
							<option value="陕西省"
								>陕西省</option>
								
							<option value="河南省"
									>河南省</option>
									
							<option value="黑龙江省"
									>黑龙江省</option>
									
							<option value="台湾省"
									>台湾省</option>
									
							<option value="日本省"
									>日本省</option>
									
							<option value="机密"
									>机密</option>
									
							<option value="美利坚省"
									>美利坚省</option>
						
				</select></td>
				<td align="right">数据来源时间：</td>
				<td><input id="cpidate" name="date" type="text"
					onclick="new WdatePicker({ dateFmt: 'yyyy-MM', isShowToday: false, isShowClear: false })"
					class="input-text-sytle98"></td>
				
				<td><input id="btnsubmit" name="btnsubmit" type="image"
					src="images/bseach.gif"
					onclick="return check()"></td>
			</tr>
		</table>
	<div id="main" style="width: 600px;height:400px;"></div>
	 <script type="text/javascript">
	        $(document).ready(function(){
	        	 $("#btnsubmit").click(function(){
	        	var myChart = echarts.init(document.getElementById('main'));
	        	var dataTypeCpi = $("#datatypeid").val();
	        	var areaCpi = $("#areaid").val();
	        	var dateCpi = $("#cpidate").val();
	        	//jq与ajax调用
                $.get("${pageContext.request.contextPath}/Dosearch?dataType="+dataTypeCpi+"&area="+areaCpi+"&date="+dateCpi+"",function(data){
                	myChart.setOption({
                        series : [
                            {
                                name: '访问来源',
                                type: 'pie',    // 设置图表类型为饼图
                                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度
                                data:data.data_pie
                            }
                        ]
                    })
                },'json');
	          });
	        });
	    </script>
</body>
</html>